<template>
    <div class="header">
        <nav class="nav">
            <li class="logo"><img src="~common/image/logo_top.png" alt=""></li>
            <li class="routeli navli"><router-link :to="{ name: 'home'}">直啵首页</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'anywhere'}">服务套餐</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'technology'}">技术优势</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'cooperation'}">合作加盟</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'cameraman'}">摄影师入驻</router-link></li>
            <li class="routeli navli hasBack"><router-link :to="{ name: 'ourInfo'}">申请体验</router-link></li>
            <li class="routeli phone"><i class="icon iconfont icon-phone"></i>&nbsp;&nbsp;400-969-9192</li>
        </nav>
        <div class="navbar" @click="toggleShow">
            <button>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <nav class="nav-mobile" v-show="isActive" ref="navMobile" >
            <li class="routeli navli"><router-link :to="{ name: 'home'}">直啵首页</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'anywhere'}">服务套餐</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'technology'}">技术优势</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'hardware'}">合作加盟</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'cooperation'}">合作加盟</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'cameraman'}">摄影师入驻</router-link></li>
            <li class="routeli navli"><router-link :to="{ name: 'ourInfo'}">申请体验</router-link></li>
        </nav>
        <div class="shadow" v-show="isActive"  @click="isActive = false"></div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {
            isActive: false
        };
    },
    methods: {
        toggleShow: function () {
            this.isActive = !this.isActive;
        },
        initial() {
            let wh = window.innerHeight;
            if (wh < 768) {
                this.$refs.navMobile.style.height = wh;
            }
        }
    },
    mounted() {
        this.initial();
        this.$router.beforeEach((to, from, next) => {
            this.isActive = false;
            next();
        });
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"
    .header
        height 60px
        width 100%
        background rgba(255,120,120,1)
        position fixed
        top 0
        left 0
        z-index 99
        .navbar
            display none
            height 48px
            width 58px
            float right
            margin 10px
            button
                height 100%
                width 100%
                background none
                .icon-bar
                    width 100%
                    height 4px
                    background #888
                    display block
                    margin-bottom 17px
        .nav
            margin 0 auto
            height 100%
            font-size 0
            text-align center
            li.routeli
                font-size 16px
                display inline-block
                width 8%
                line-height 60px
                margin 0 auto
                vertical-align: top
                a
                    color #fff
                    font-size 16px
                    font-family PingFang SC-Medium
                    &.router-link-active
                        padding-bottom: 5px
                        border-bottom 2px solid #fff
                &.hasBack
                    a
                        display inline-block
                        height 28px
                        line-height 28px
                        width 100px
                        background #fff
                        color #ff7878
                        border-radius 14px
            .logo
                height 50px
                display inline-block
                float left
                margin 10px 20px
            .phone
                width 140px!important
                height 60px
                color #fff
                font-size 14px!important
                float right
                margin-right 20px
                display inline-block
        .shadow
            position: fixed
            top: 0
            left: 0
            display: block
            width: 100%
            height: 100%
            background: hsla(0,0%,100%,0)
            z-index: -1
@media screen and (max-width 1300px)
    .header
        height 60px
        width 100%
        background rgba(255,120,120,1)
        position fixed
        top 0
        left 0
        z-index 99
        .navbar
            display none
            height 48px
            width 58px
            float right
            margin 10px
            button
                height 100%
                width 100%
                background none
                .icon-bar
                    width 100%
                    height 4px
                    background #888
                    display block
                    margin-bottom 17px
        .nav
            margin 0 auto
            height 100%
            font-size 0
            text-align center
            li.routeli
                font-size 16px
                display inline-block
                width 8%
                min-width 100px
                line-height 60px
                margin 0 auto
                vertical-align: top
                a
                    color #fff
                    font-size 16px
                    font-family PingFang SC-Medium
            .logo
                height 50px
                display inline-block
                float left
                margin-left 20px
                img
                    height 100%
                    max-width 100%
            .phone
                width 200px
                height 60px
                color #fff
                font-size 14px!important
                float right
                margin-right 20px
                display inline-block
        .shadow
            position: fixed
            top: 0
            left: 0
            display: block
            width: 100%
            height: 100%
            background: hsla(0,0%,100%,0)
            z-index: -1
@media screen and (max-width 767px)
    .header
        height 0
        border 0
        width 100%
        .navbar
            display block
            height 0.64rem
            width 0.8rem
            margin 0.2667rem
            button
                .icon-bar
                    height 3px
                    margin-bottom 0.2267rem
        .nav
            display none
        .nav-mobile
            background rgba(130,130,130,0.8)
            padding-bottom 30px
            &.active
                display block
            li.navli
                line-height 1.0667rem
                font-size 0.4rem
                font-family PingFangSC-Medium
                a
                    color #fff
                    display inline-block
                    height 100%
                    width 100%
                    text-align center
            .logo
                display none
@media screen and (width 828px)
    .header
        height 0
        width 100%
        .navbar
            display block
            height 0.64rem
            width 0.8rem
            margin 0.2667rem
            button
                .icon-bar
                    height 3px
                    margin-bottom 0.2267rem
        .nav
            display none
        .nav-mobile
            background rgba(130,130,130,0.8)
            padding-bottom 30px
            &.active
                display block
            li.navli
                line-height 1.0667rem
                font-size 0.4rem
                font-family PingFangSC-Medium
                a
                    color #fff
                    display inline-block
                    height 100%
                    width 100%
                    text-align center
            .logo
                display none
</style>
